<template>

    <body>
        <h1>Hello! Welcome to classic games!</h1>
        <div class="div2">
            <img src="/image.png" alt="">
            <!-- 登录注册 -->
            <form v-if="!forgetpassword">
                <input class="a1 input1" type="text" placeholder="账号 / 手机号 / QQ / 邮箱" v-model="usernumber">
                <input class="a1 input2" type="password" placeholder="密码" v-model="password">
                <input v-show="loginregister" class="a1 input2" type="password" placeholder="确认密码"
                    v-model="passwordrequest">
                <div v-show="loginregister" class="codediv">
                    <input style="text-align: center" class=" a1 input4" placeholder="验证码" v-model="code">
                    <img :src="sisioncode" alt="" @click="getregistercode()" class="codeimg">
                </div>
                <button type="button" v-show="!loginregister" class="a1 button1"
                    @click="login()"><span>登录</span></button>
                <button type="button" v-show="loginregister" class="a1 button2"
                    @click="register()"><span>注册</span></button>
                <div style="margin: 20px auto;width: 70%; padding-bottom: 20px;">
                    <a v-show="!loginregister" class="zhuce" href="#"
                        @click="refresh(), getregistercode(), loginregister = !loginregister">注册</a>
                    <a v-show="loginregister" class="zhuce" href="#"
                        @click=" refresh(), loginregister = !loginregister">返回</a>
                    <a v-show="!loginregister" class="wanger" href="#" @click="forget()">忘记密码?</a>
                </div>
            </form>

            <!-- 忘记密码 -->
            <form v-else>
                <input class="a1 input1" type="text" placeholder="邮箱" v-model="email">

                <div>
                    <input class="a1 input3" placeholder="验证码" style="text-align: center;" v-model='code'>

                    <button type="button" id="getCodeBtn" @click="getCode()" v-if="isDable">
                        获取验证码
                    </button>
                    <button type="button" id="getCodeBtn" @click="getCode()" v-else>
                        {{ times }}s后重新发送
                    </button>
                </div>
                <button type="button" class="a1 button1" @click="reset()"><span>确认</span></button>
                <div style="margin: 20px auto;width: 70%; padding-bottom: 20px;">
                    <a class="zhuce" href="#" @click=" refresh(), forgetpassword = !forgetpassword">返回</a>

                </div>
            </form>
        </div>
    </body>
</template>

<script setup>
import { ref } from 'vue';

const { proxy } = getCurrentInstance()

const usernumber = ref('')// 账号
const password = ref('')// 密码
const passwordrequest = ref('')// 确认密码
const code = ref('')//验证码
const email = ref('')//邮箱
const loginregister = ref(false)// 登录注册装换开关
const forgetpassword = ref(false)// 忘记密码开关
const isDable = ref(true) // 切换开关
const times = ref(60) // 倒计时时间
const sisioncode = ref()

// 刷新
const refresh = () => {
    usernumber.value = ''
    password.value = ''
    passwordrequest.value = ''
    code.value = ''
    email.value = ''
}
// 忘记密码
const forget = () => {
    forgetpassword.value = !forgetpassword.value
}

// 验证码
const getCode = async () => {
    if (!email.value) {
        proxy.$fail('请输入邮箱号')
        return false
    }
    if (isDable.value === false) {
        proxy.$fail(`验证码已发送,${times.value}s后可重新发送`)
        return false
    } else {
        const data = {
            email: email.value,
        }

        const res = await proxy.$http.post({
            url: '/user/sendCode',
            params: data,
        })

        if (res.code === 1) {
            proxy.$success('验证码发送成功,请注意查收')
        } else {
            proxy.$fail(res.msg)
            return
        }
    }
    isDable.value = false
    // 定时器
    const timer = setInterval(() => {
        times.value--
        if (times.value <= 0) {
            clearInterval(timer) // 清除定时器
            isDable.value = true
            times.value = 60
        }
    }, 1000)

}

// 注册验证码
const getregistercode = async () => {
    const result = await proxy.$http.post({
        url: '/user/generateCaptcha',
        params: {
        }
    })

    if (result.code === 1) {
        sisioncode.value = result.data.captcha
    } else {
        proxy.$fail('服务器错误，验证码获取失败')
        return
    }
}

// 登录
const login = async () => {
    if (!usernumber.value) {
        proxy.$fail('请输入账号')
        return
    }
    if (!password.value) {
        proxy.$fail('请输入密码')
        return
    }

    const res = await proxy.$http.post({
        url: '/user/login',
        params: {
            usernumber: usernumber.value,
            password: password.value,
        }
    })

    if (res.code === 1) {
        proxy.$success('登录成功')
        proxy.$business.value = res.data
        setTimeout(() => {
            proxy.$router.push('/')
        }, 1000)
    } else {
        proxy.$fail(res.msg)
        return
    }
}

// 注册
const register = async () => {
    //手机正则
    const mobileReg = /^1[3-9]\d{9}$/;
    //qq号正则
    const qqReg = /^[1-9][0-9]{4,10}$/;
    // 邮箱正则
    const emailReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;

    if (!mobileReg.test(usernumber.value) && !qqReg.test(usernumber.value) && !emailReg.test(usernumber.value)) {
        proxy.$fail('请输入正确的账号格式')
        return
    }
    const res = await proxy.$http.post({
        url: '/user/register',
        params: {
            usernumber: usernumber.value,
            password: password.value,
            passwordrequest: passwordrequest.value,
            code: code.value
        }
    })

    if (res.code === 1) {
        proxy.$success('注册成功,请登录')
        refresh()
        setTimeout(() => {
            loginregister.value = !loginregister
        }, 1000)
    } else {
        proxy.$fail(res.msg)
        return
    }

}

// 邮箱验证登录
const reset = async () => {
    if (!email.value) {
        proxy.$fail('请输入邮箱号')
        return false
    }
    if (!code.value) {
        proxy.$fail('请输入验证码')
        return false
    }
    const emailReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
    if (!emailReg.test(email.value)) {
        proxy.$fail('请输入正确的邮箱格式')
        return false
    }
    const res = await proxy.$http.post({
        url: '/user/loginCode',
        params: {
            email: email.value,
            code: code.value
        }
    })
    if (res.code === 1) {
        proxy.$success('登录成功')
        proxy.$business.value = res.data
        setTimeout(() => {
            proxy.$router.push('/')
        }, 1000)
    } else {
        proxy.$fail(res.msg)
        return
    }
}


</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}


body {
    width: 100%;
    height: 100vh;
    background-color: none;
    background-image: url(/assets/back.jpg);
    background-size: cover;
    overflow: hidden;
}

h1 {
    color: aliceblue;
    text-align: center;
    margin-top: 32px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.div2 {
    width: 305px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 9px;
    margin: 0 auto;
    margin-top: 48px;
    text-align: center;
    padding-bottom: 20px;
}


.div2>img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    margin-top: 30px;
    margin-bottom: 24px;
}

.a1 {
    border-radius: 5px;
    height: 30px;
    width: 220px;
    border: 1px solid rgba(0, 0, 0, 0.8);
    outline: none;
}

span {
    color: rgb(255, 255, 255);
    font-weight: 500;
}

.button1 {
    background-color: rgb(154, 205, 50);
    border: none;
    margin-top: 20px;
}

.button2 {
    background-color: rgb(220, 20, 60);
    border: none;
    margin-top: 20px;
}


.input1 {
    background: url(/assets/user.png)no-repeat 6px 6px;
    color: #000;
    text-indent: 27px;
}

.input2 {
    background: url(/assets/lock.png)no-repeat 6px 6px;
    color: #000;
    text-indent: 27px;
    margin-top: 20px;
}

.input3 {
    width: 38%;
    background: url()no-repeat 6px 6px;
    color: #000;
    margin-top: 20px;
}

.input4 {
    width: 60%;
    background: url()no-repeat 6px 6px;
    color: #000;
    margin-top: 20px;
}

.codeimg {
    width: 35%;
    height: 30px;
    margin-left: 10px;
    object-fit: cover;
}

.codediv {
    width: 220px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin: 20px auto;

}

/* input3提示字样式*/
.input3::placeholder {
    text-align: center;
}

.zhuce {
    font-weight: 600;
    color: black;
    font-size: 14px;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    /* 禁止下划线断开 */
    text-underline-offset: 3px;
    /* 控制下划线位置 */
    text-decoration-color: rgba(0, 0, 0, 0.6);
    /* 下划线颜色 */
    display: block;
    float: left;
}

.wanger {
    font-weight: 600;
    color: black;
    font-size: 14px;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    /* 禁止下划线断开 */
    text-underline-offset: 3px;
    /* 控制下划线位置 */
    text-decoration-color: rgba(0, 0, 0, 0.6);
    /* 下划线颜色 */
    display: block;
    float: right;
}

#getCodeBtn {
    background-color: transparent;
    border: none;
    margin-top: 20px;
    color: #000;
    /* 下横线 */
    text-decoration: underline;
}

.button1:hover {
    background-color: rgb(120, 160, 40);
}

.button2:hover {
    background-color: rgb(180, 15, 50);
}

#getCodeBtn:hover {
    color: rgb(44, 82, 130);
}
</style>
